<template>
    <!-- action必选参数, 上传的地址 -->
    <el-upload class="avatar-uploader"
    ref="uploadRef" 
    :action="uploadUrl" 
    :show-file-list="false"
    :before-upload="beforeUploadVideo" 
    :on-progress="uploadVideoProcess"
    :on-success="handleVideoSuccess">
        <div v-if="videoForm.Video !='' && videoFlag == false" style="width: 18vw;">
            <video style="width: 18vw;height: 12vw;" :src="videoForm.Video" class="avatar" controls>您的浏览器不支持视频播放</video>
            <div style="display: flex;justify-content: center;align-items: center;">
                <span>{{ videoData.originalFilename }}</span>
                <span style="font-size: 1.6vw;margin-left: 2vw;" @click="deleteVideo">X</span>
            </div>
        </div>
        <el-icon v-else-if="videoForm.Video =='' && videoFlag == false" class="avatar-uploader-icon"><Plus /></el-icon>
        <el-progress v-if="videoFlag == true" type="circle" :percentage="videoUploadPercent" style="margin-top:30px;"></el-progress>
    </el-upload>
</template>

<script setup lang="ts">
import {ref} from 'vue'
import { Plus } from '@element-plus/icons-vue'
import {ElMessage } from 'element-plus';

const props = defineProps(['keyword']);
const  uploadRef = ref();
const videoFlag = ref(false);
const uploadUrl = ref("http://reg.vip.cpolar.cn/common/upload");
const videoForm = ref({
    Video:"",
    videoUploadId:""
});
const videoUploadPercent = ref(0);
const videoData = ref({originalFilename:'',fileName:''});

const beforeUploadVideo = (file:any)=>{
    const isLt500M = file.size / 1024 / 1024  < 500;
    if (['video/mp4'].indexOf(file.type) == -1) {
        ElMessage.error('请上传正确的视频格式');
        return false;
    }
    if (!isLt500M) {
        ElMessage.error('上传视频大小不能超过500MB哦!');
        return false;
    }
}

const uploadVideoProcess = (event:any, file:any, fileList:any)=>{
    videoFlag.value = true;
    videoUploadPercent.value = file.percentage.toFixed(0);
}
const handleVideoSuccess = (res:any, file:any)=>{
    videoFlag.value = false;
    videoUploadPercent.value = 0;
    console.log(res);
    if(res.code == 200){
        videoForm.value.videoUploadId = res.newFileName;
        videoForm.value.Video = res.url;
        videoData.value = res;
    }else{
        ElMessage.error('视频上传失败，请重新上传！');
    }
}

const getVideoData = ()=>{
    let data = {keyWord: props.keyword,url: videoData.value.fileName,fileType: 1,subTitle: videoData.value.originalFilename};
    return data;
}

const deleteVideo = ()=>{
    videoForm.value.videoUploadId = "";
    videoForm.value.Video = "";
}

defineExpose({getVideoData})
</script>

<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}
.avatar-uploader
{
    width: 18vw;
    height: 12vw;
    border: 1px dashed gainsboro;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    margin: 1.2vw;
}
.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}
.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>